<template>
  <div class="frame-warp">
    <aside>
      <div class="logo">
        <span>管理系统</span>
      </div>
      <el-menu :default-active="defaultRoute" router class="el-menu-vertical-demo" background-color="#121a36" text-color="#999999" active-text-color="#fff">
        <el-menu-item index="/index/home"><i class="iconfont icon-yemian-copy-copy"></i><span slot="title">首页</span></el-menu-item>
      </el-menu>
    </aside>
    <div class="main">
      <header>
        <div class="left_action">
          <div class="back_home" @click="goHome">
            <i class="iconfont icon-shouye-"></i>
            <span>返回首页</span>
          </div>
        </div>
        <div class="right_action">
          <span>欢迎您，{{userInfo.name}}({{userInfo.username}})</span>
          <div class="quit_out" @click="loginOut">
            <i class="iconfont icon-out"></i>
          </div>
        </div>
      </header>
      <section>
        <router-view></router-view>
      </section>
      <footer>
        <span>©2020 版权所有</span>
      </footer>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: "frame",
  data () {
    return {
      defaultRoute: this.$route.path,
      routerChange: {
        // '/index/setOperate': '/index/hotList'
      }
    }
  },
  computed: {
    ...mapState(['isLogin', 'userInfo']),
  },
  mounted(){
    this.getCurrentUserInfo()
    this.refreshToken()
    this.initDefault()
  },
  methods: {
    ...mapMutations(['CLEAN_USERINFO','SET_USERINFO','SET_TOKEN']),
    initDefault(){
      if(this.routerChange[this.defaultRoute]){
        this.defaultRoute = this.routerChange[this.defaultRoute]
      }
    },
    getCurrentUserInfo(){
      vm.sendAxiosPromise({
        method: "get",
        url: vm.ApiSet.getUserInfo,
      }).then(res=>{
        this.SET_USERINFO(res.data)
      })
    },
    refreshToken(){
      vm.sendAxiosPromise({
        method: "post",
        url: vm.ApiSet.keepalive,
      }).then(res=>{
        if(res.data){
          this.SET_TOKEN(res.data.token)
        }
      })
    },
    goHome(){
      this.$router.push('/index/home')
    },
    loginOut(){
      this.$confirm('是否确定退出系统', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.sendAxiosPromise({
          method: "post",
          url: vm.ApiSet.loginOut,
        }).then(res=>{
          this.CLEAN_USERINFO()
          this.$router.push('/login')
        })
      })
    }
  }
};
</script>
<style lang="less" scoped>
  @import './index.less';
</style>


